<template>
  <div style="width:100%;height: 100%;">
    <!--<VerticalScrollOuter class="jjjjjjjjjjjjjjjjj">-->
    <div style="width:100%;height:627px;padding-top: 3rem">
      <vertical-scroll>
        <!--<mvvm>-->

        <!--</mvvm>-->

        <date>

        </date>
        <div style="z-index:2;height: 3rem;position:absolute;padding-top: 1rem">
          <tab-head @tabOnChange="tabOnChange">

          </tab-head>
        </div>

        <div class="cjy-page-body">
          <!--<img src="../../../static/image/nianhuoImage/newUser.jpg"/>-->

          <div class="cjy-page-body-list" style="width: 100%">

            <div style="width: 100%; background: black;padding:0.5rem">
              <active-item itemType="A">

              </active-item>
              <active-item itemType="B">
              </active-item>
            </div>

            <div style="width: 100%; background: black;padding:0.5rem">
              <active-item itemType="D">

              </active-item>
            </div>

            <div style="width: 100%; background: black;padding:0.5rem">
              <active-item itemType="E">

              </active-item>
              <active-item itemType="E">

              </active-item>
            </div>

            <div style="width: 100%; background: black;padding:0.5rem">
              <active-item itemType="F">

              </active-item>

            </div>
            <div style="width: 100%; background: black;padding:0.5rem">
              <active-item itemType="G">

              </active-item>

            </div>
            <div style="width: 100%; background: black;padding:0.2rem">
              <active-item itemType="H">

              </active-item>
              <active-item itemType="I">

              </active-item>
              <active-item itemType="J">

              </active-item>
            </div>

          </div>
        </div>


      </vertical-scroll>
    </div>
    <!--</VerticalScrollOuter>-->
  </div>
</template>

<script>
  import VerticalScroll from '@/real-components/VerticalScroll';
  import VerticalScrollOuter from '@/real-components/VerticalScrollOuter';
  import CommodityForActice from '@/real-components/CommodityForActice';
  import ActiveItem from '@/real-components/ActiveItem';
  import TabHead from '@/real-components/TabHead/StyleTabHead';
  import date from './Date';
  import Mvvm from './Mvvm'
  import {getConfig} from '../../utils/ReturnAxios'

  export default {
    data() {
      return {
        backgroundColorList: ['black', 'rgb(26, 153, 241)', 'rgb(243,51,0)', 'rgb(154,0,33)'],
      };
    },
    components: {
      VerticalScroll,
      CommodityForActice,
      ActiveItem,
      TabHead,
      VerticalScrollOuter,
      date,
      Mvvm,
      Corw
    },
    methods: {
      tabOnChange(index, item) {
        console.log(index, item);
      },
      async getConfig() {
        var res = await getConfig()
        res = res.data
        console.log(res.data[0])
      }
    },
    created() {
      this.getConfig()
    }
  };
</script>

<style>
  .cjy-test-header {
    line-height: 2.2rem;
    height: 2.2rem;
  }

  .cjy-page-body {
    width: 100%;
  }

  .cjy-page-body-list {
    background: #ee1c01;
  }

  .cjy-page-body-list > div {
    position: relative;
  }

  .cjy-page-body-list > div:before {
    content: '';
    position: absolute;
    clear: both;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background: black;
  }

  .cjy-page-body-list > div:after {
    content: '';
    clear: both;
    display: block;
  }

  /*优惠券*/

  .cjy-page-body-compon {
    padding: 1.2rem 0.75rem;
  }

  .cjy-page-body-compon-item {
    width: 33.3%;
    float: left;
    padding-bottom¬: 53%;
    height: 0;
    position: relative;
    overflow: hidden;
  }

  .cjy-page-body-compon-item img {
    width: 101%;
  }

  .cjy-page-body-compon-pric {
    width: 100%;
    top: 0;
    text-align: center;
    font-size: 0.6rem;
    color: rgb(255, 266, 6);
    position: absolute;
    z-index: 3;
    font-weight: 600;
  }

  cjy-page-body-compon-bordr {
    position: absolute;
    z-index: 2;
  }

  /*礼包*/

  /*底部*/

  .cjy-page-body-stuck {
    padding: 2rem 0.26rem 1.36rem;
    background: white;
  }

  .cjy-page-body-stuck-ul {
    width: 100%;
  }

  .cjy-page-body-stuck-ul:after {
    content: '';
    display: block;
    clear: both;
  }

  .cjy-page-body-stuck-li {
    width: 33%;
    position: relative;
    padding-bottom: 100px;
    float: left;
  }

  .cjy-page-body-stuck-li > div {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0778ba;
    padidng: 0 0.26rem;
    width: 4rem;
  }
</style>
